<template>
  <div id="center_text">
    <div v-if="go===true" style="float: left">
      <div>
        贷款金额
        <input type="text" style="width: 455px;" v-model="money" placeholder="元"/>
      </div><br>
      <div class="center_a">
        贷款期限
        <input type="text" v-model="time_years" placeholder="年"/>
        <input type="text"  v-model="time_month" placeholder="月"/>
      </div><br>
      <div>
        利率方式
        <input type="text" style="width: 455px" placeholder="旧版基准利率" disabled/>
      </div><br>
      <div>
        贷款利率
        <input type="text" style="width: 455px" list="ratelist" v-model="rate" placeholder="请选择"/>
        <datalist id="ratelist">
          <option>0.0465</option>
<!--          4.65%-->
          <option>0.049</option>
<!--          4.9%-->
        </datalist>
      </div><br>
      <button id="center_go" @click="isShow(false)" >开始计算</button>
    </div>
    <div v-if="go===false" style="float: left">
      <div>
        <div class="send">贷款总额:{{sumFull}}</div>
        <div class="send">首月还款:{{firstMoney.toFixed(2)}}</div>
        <div class="send">还款月数:{{timeSum}}</div>
      </div>
      <button @click="isShow(true)" id="fanhui">返回</button>
    </div>

    <div class="right_a">
      <img :src='center_image' alt="" style="width: 500px">
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Center_1",
  data() {
    return {
      input: '',
      money:'',
      time_years:'',
      time_month:'',
      rate:'',
      // center_image:require("../assets/images/center_1.png"),
      center_image:require("../../assets/images/center_1.png"),

      go: true,
    }
  },
  computed:{

    sumFull(){
      return this.money
    },
    timeSum(){
      return parseInt(this.time_years)*12+parseInt(this.time_month)
    },
    firstMoney(){
      const aa = (parseInt(this.time_years)*12+parseInt(this.time_month))
      const ab = parseInt(1+this.rate)
      const ac = parseInt(this.money*this.rate)
      const ad = parseInt((1+ab)^aa)
      //每月还款额=[总本金×月利率×(1+月利率)^还款月数]÷[(1+月利率)^总期数-1
      return (ac*ab^aa)/(ad-1)
    },

  },
  methods:{
    isShow(a){
      this.go=a;
      if(this.money===''){
        alert('请输入贷款金额')
        this.go=true
        //return this.isShow(true);
      }else if(this.time_years===''||this.time_month===''){
        alert('请完善贷款期限')
        this.go=true
      }else if(this.rate===''){
        alert('请选择利率')
        this.go=true
      }
    },
  },

}
</script>

<style scoped>
/*.mn{
  display: flex;
  justify-content: space-around;
}*/
#center_text{
  margin: 30px 0 10px 0;
  width: 1100px;
  font-size: 18px;
  margin-left: 280px;
}
#center_text input{
  width: 220px;
  height: 49px;
  background-color: gainsboro;
  border:none;
  margin-left: 10px;
}
.right_a{
  width: 500px;
  height: 400px;
  float: right;
  //background-color: bisque;
}
#center_go,#fanhui{
  width: 200px;
  height: 49px;
  border-radius: 8px;
  background-color: cornflowerblue;
  margin: 30px 0 10px 85px;
}
.send{
  margin: 30px 0 10px 85px;
  width: 400px;
  height: 49px;
  background-color: gainsboro;
  line-height: 50px;
}
</style>